<template>
  <div class="dia-search">
    <Dialog
      class="dialog"
      top="5vh"
      width="63%"
      title="设备列表"
      v-model:visible="props.visible"
      :showImg="false"
    >
      <template #showImg>
        <img src="../../../assets/images/false.png" @click="hidenDia" alt="" />
      </template>

      <template #content>
        <div class="content">
          <el-form :model="formData" size="large" :inline="true">
            <el-row>
              <el-col :span="7">
                <el-form-item label="所属区域:">
                  <el-select v-model="formData.a" clearable>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="所属变压器:">
                  <el-select v-model="formData.a" clearable>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="设备名称：">
                  <el-input v-model="formData.b"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <button>查询</button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="table-wrap">
            <el-table
              max-height="453"
              :data="tableData"
              border
              @selection-change="handleSelectionChange"
            >
              <!-- <el-table-column type="selection" /> -->
              <el-table-column
                align="center"
                property="name"
                label="设备名称"
              />
              <el-table-column
                align="center"
                property="name"
                label="所属区域"
              />
              <el-table-column
                align="center"
                property="name"
                label="所属变压器"
              />
              <el-table-column
                align="center"
                property="name"
                label="所属出线柜"
              />
              <el-table-column
                align="center"
                property="name"
                label="通讯状况"
              />
            </el-table>
            <div style="padding-top: 15px">
              <Pagination
                @getDataList="getDataList"
                :pageSize="pageSize"
                :total="total"
                :currentPage="currentPage"
              />
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="btn-wrap">
          <button class="cancel" @click="hidenDia">取消</button>
          <button class="sure" @click="sure">确定</button>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
let pageSize = ref("");
let total = ref(111);
let currentPage = ref("");
let props = defineProps(["visible"]);
let emit = defineEmits(["update:visible", "serachDigSure"]);
let formData = reactive({});
let tableData = reactive([
  { name: 1 },
  { name: 1 },
  { name: 1 },
  { name: 1 },
  { name: 1 },
  { name: 1 },
  { name: 1 },
  { name: 1 },
  { name: 1 },
  { name: 1 },
]);
const hidenDia = () => {
  emit("update:visible", false);
};

const sure = () => {
  emit("serachDigSure");
};
const getDataList = () => {};

const handleSelectionChange = () => {};
</script>
<style lang="scss" scoped>
.dia-search {
  :deep(.el-pagination__sizes) {
    width: 120px !important;
  }
  .content {
    padding: 31px 38px 0 30px;
    button {
      width: 85px;
      height: 42px;
      background: #0250f9;
      border-radius: 5px;
      font-size: 22px;
      font-weight: 400;
      color: #ffffff;
    }
  }

  img {
    width: 19px;
    height: 19px;
    cursor: pointer;
  }
}
.btn-wrap {
  margin-bottom: 60px;
  margin-top: 95px;
  display: flex;
  justify-content: center;
  button {
    width: 109px;
    height: 51px;
    border-radius: 5px;
    font-size: 24px;
    font-weight: 500;
  }
  .cancel {
    background: #ffffff;
    color: #999999;
    border: 2px solid #d2d2d2;
  }
  .sure {
    color: #ffffff;
    margin-left: 25px;
    background: #0250f9;
  }
}
</style>
